<template>
	<!-- pages/member/everyday_push/index.wxml -->
	<view class="container">
		<template v-if="nowList.total > 0">
			<template v-for="(item, index) in nowList.data">
				<view class="date_time">{{ item.createtime_text }}</view>

				<view class="push_box">
					<template v-for="(item, index1) in item.houseData">
						<navigator v-if="index1 == 0" :url="'/pages/house/building_detail/building_detail?id=' + item.id"
							hover-class="none" class="box1">
							<image :src="item.image_text" mode="aspectFill"></image>
							<view class="title_box single-line">{{ item.name }}</view>
						</navigator>

						<navigator v-else :url="'/pages/house/building_detail/building_detail?id=' + item.id"
							hover-class="none" class="box2 df ac js">
							<view class="flex-grow-1 multi-line">{{ item.name }}</view>
							<image :src="item.image_text" mode="aspectFill"></image>
						</navigator>
					</template>
				</view>
			</template>
			<u-loadmore :status="loadStatus" fontSize="24" line loading-text="努力加载中" loadmore-text="轻轻上拉"
				nomore-text="没有更多了" />
		</template>
		<template v-else>
			<u-empty mode="data" text="暂无数据" textSize="24" icon="/static/images/none-data.png">
			</u-empty>
		</template>
	</view>
</template>

<script>
	// pages/member/everyday_push/index.js
	const app = getApp();

	const functions = require('../../../utils/functions.js');

	export default {
		data() {
			return {
				// 列表
				nowList: {
					total: 0,
					current_page: 0,
					last_page: 1,
					data: []
				},
				loadStatus: 'loadmore', //加载状态
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
			this.initData();
		},
		
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			uni.showNavigationBarLoading(); //在标题栏中显示加载

			var that = this; //模拟加载

			setTimeout(function() {
				that.initData();
				uni.stopPullDownRefresh(); //停止下拉刷新
			}, 1500);
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		// onShareAppMessage: function () {
		// }
		onReachBottom: function() {
			if (this.nowList.current_page >= this.nowList.last_page) {
				// functions.toast('已加载到底部了');
				this.loadStatus = 'nomore';
				return false;
			} else {
				this.getnowList();
			}
		},
		/**
		 * 用户点击右上角分享
		 */
		methods: {
			// 获取列表信息
			getnowList: function() {
				var that = this;
				var json = {
					classify: 2
				};
				json.page = Number(that.nowList.current_page) + 1;

				if (json.page > 1 && that.nowList.current_page >= that.nowList.last_page) {
					functions.toast('已加载到底部了');
					this.loadStatus = 'nomore';
					return false;
				}
				this.loadStatus = 'loading';
				functions.getAjaxList(that, '/api/xiluhouse/chat/message_list', json, function(res) {
					var nowList = res.data;

					if (json.page > 1) {
						var now_nowList_data = that.nowList.data || [];
						var now_nowList_data = now_nowList_data.concat(nowList.data);
						nowList.data = now_nowList_data;
					}

					that.nowList = nowList

				});
			},

			// 获取所有可下拉刷新更新的数据
			initData: function() {
				var that = this;
				that.nowList.current_page = 0;

				that.getnowList();
			}
		}
	};
</script>
<style>
	
	/* pages/member/everyday_push/index.wxss */
	@import url('@/static/css/old_project.css');
	.container {
		background-color: #f6f7fa;
		display: flex;
		align-items: center;
		flex-direction: column;
		padding: 30rpx 0;
	}

	.date_time {
		height: 36rpx;
		background: #ffffff;
		border-radius: 18rpx;
		font-size: 20rpx;
		color: #ccc;
		line-height: 36rpx;
		padding: 0 11rpx;
		display: inline-block;
		margin-bottom: 30rpx;
	}

	.push_box {
		width: 670rpx;
		margin: 0 auto 30rpx;
		background-color: #fff;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.box1 {
		width: 100%;
		height: 280rpx;
		position: relative;
		border-radius: 8rpx 8rpx 0 0;
		overflow: hidden;
	}

	.box1 image {
		position: relative;
		z-index: 1;
		width: 100%;
		height: 280rpx;
	}

	.title_box {
		width: 670rpx;
		height: 80rpx;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
		line-height: 80rpx;
		color: #fff;
		font-size: 30rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 2;
		padding: 0 30rpx;
	}

	.box2 {
		padding: 30rpx;
		border-bottom: 1px solid #f5f6f7;
		font-size: 30rpx;
		color: #101010;
	}

	.box2 image {
		width: 150rpx;
		height: 120rpx;
		border-radius: 4rpx;
		margin-left: 20rpx;
	}

	.push_box .box2:last-child {
		border: none;
	}
</style>
